<template>
	<tm-app ref="app">
		<tm-navbar title="我的订单" color="orange" linear="right" beforeBack="true" hideHome="true"
			@click="backPage"></tm-navbar>

		<tm-tabs :list="tabsTitle" @change="tabschange" align="center" :width="736" :height="300" default-name="1"
			itemModel="line" activeColor="orange" activeFontColor="orange">
		</tm-tabs>

		<tm-card :status="item['addtime']" statusColor="orange" :title="'订单编号：'+item['id']"
			v-for="(item, key) in orderlist" :key="key">
			<template v-slot:action>
				<tm-sheet style="border: 0px solid;margin-left: -55rpx;width: 99%;">
					<!--<tm-divider style="height: 30rpx;margin-top: -90rpx;" align="right" label="地址"></tm-divider>-->
					<tm-descriptions style="height: 30rpx;margin-top: -90rpx;" :label-width="100" :width="650"
						:column="2" transprent :round="2">
						<tm-descriptions-item :font-size="24" label="联系人" :value="item.lxr"></tm-descriptions-item>
						<tm-descriptions-item :font-size="24" label="联系方式" :value="item.phone"></tm-descriptions-item>
					</tm-descriptions>
					<tm-descriptions style="height: 30rpx;" :label-width="100" :width="650" :column="1" transprent
						:round="2">
						<tm-descriptions-item :font-size="24" label="地址" :value="item.address"></tm-descriptions-item>
					</tm-descriptions>
					<!--<tm-divider style="height: 30rpx;margin-top: 20rpx;" align="right" label="时间"></tm-divider>-->
					<tm-descriptions style="height: 30rpx;" :label-width="100" :width="650" :column="2" transprent
						:round="2">
						<tm-descriptions-item :font-size="24" label="日期" :value="item.date"></tm-descriptions-item>
						<tm-descriptions-item :font-size="24" label="时间" :value="item.time"></tm-descriptions-item>
					</tm-descriptions>
					<!--<tm-divider style="height: 30rpx;margin-top: 20rpx;" align="right" label="帮手-科目"></tm-divider>-->
					<tm-descriptions style="height: 30rpx;" :label-width="100" :width="650" :column="2" transprent
						:round="2">
						<tm-descriptions-item :font-size="24" label="帮手" :value="item.name"></tm-descriptions-item>
						<tm-descriptions-item :font-size="24" label="科目" :value="item.km"></tm-descriptions-item>
					</tm-descriptions>
					<!--<tm-divider style="height: 30rpx;margin-top: 20rpx;" align="right" label="状态"></tm-divider>-->

					<tm-descriptions style="height: 30rpx;" :label-width="100" :width="650" :column="1" transprent
						:round="2">
						<tm-descriptions-item :font-size="24" label="状态"
							:value="statusText(item.status)"></tm-descriptions-item>
					</tm-descriptions>
					<tm-descriptions v-if="item.status == 3&&code == '1'?flag:!flag" :label-width="100" :width="650"
						:column="1" transprent :round="2">
						<view style="margin-top: 30rpx;">
							<tm-image preview :width="300" :height="300" :src="item.orderimg"></tm-image>
							<tm-text color="red" fontSize="30" label="注:请将二维码提供帮手,进行扫码开始计时;或点击开始计时按钮,开始计时."></tm-text>
						</view>
					</tm-descriptions>
					<tm-descriptions v-if="item.status == 4&&code == '1'?flag:!flag" :label-width="100" :width="650"
						:column="1" transprent :round="2">
						<view style="margin-top: 30rpx;">
							<tm-image preview :width="300" :height="300" :src="item.orderimg"></tm-image>
							<tm-text color="red" fontSize="30" label="注:请将二维码提供帮手,进行扫码停止计时."></tm-text>
						</view>
					</tm-descriptions>
					<tm-descriptions v-if="item.status == 5&&code == '0'?flag:!flag" :label-width="100" :width="650"
						:column="1" transprent :round="2">
						<view style="margin-top: 30rpx;">
							<tm-image preview :width="300" :height="300" :src="item.pay_img"></tm-image>
							<tm-text color="red" fontSize="30" label="注:面对面扫码付款,任何微信都可以扫码付款."></tm-text>
						</view>
					</tm-descriptions>
					<tm-descriptions style="margin-top: 30rpx;border: 0px solid;height: 90rpx;" :column="1" :round="1">
						<tm-descriptions-item :font-size="24" style="text-align: right;">
							<!--
							<tm-button :round="24" color="orange" :margin="[24,0]" label="详情" :font-size="24" :width="120" :height="64"></tm-button>-->
							<tm-button v-if="item.status == 1&&code == '1'?flag:!flag" :round="24" color="orange"
								:margin="[24,0]" label="支付定金" :font-size="24" :width="120" :height="64"
								@click="zfDjOrder(item['id'])"></tm-button>
							<tm-button v-if="item.status == 1&&code == '1'?flag:!flag" :round="24" color="orange"
								:margin="[24,0]" label="取消订单" :font-size="24" :width="120" :height="64"
								@click="qorder(item['id'])"></tm-button>
							<!--<tm-button v-if="item.status == 3&&code == '1'?flag:!flag" :round="24" color="orange"
								:margin="[24,0]" label="扫码计时" :font-size="24" :width="120" :height="64"
								@click="showQrCode(item['id'])"></tm-button>-->
							<tm-button v-if="item.status == 3&&code == '1'?flag:!flag" :round="24" color="orange"
								:margin="[24,0]" label="开始计时" :font-size="24" :width="120" :height="64"
								@click="qorderStart(item['id'])"></tm-button>
							<tm-button v-if="item.status == 4&&code == '0'?flag:!flag" :round="24" color="orange"
								:margin="[24,0]" label="停止计时" :font-size="24" :width="120" :height="64"
								@click="qorderStop(item['id'])"></tm-button>
							<tm-button v-if="item.status == 5&&code == '1'?flag:!flag" :round="24" color="orange"
								:margin="[24,0]" label="支付订单" :font-size="24" :width="120" :height="64"
								@click="payOrder(item['id'])"></tm-button>
							<tm-button v-if="item.status == 6&&item.count == 0&&code == '1'?flag:!flag" :round="24"
								color="orange" :margin="[24,0]" label="评价" :font-size="24" :width="120" :height="64"
								@click="cliOrderEval(item['id'])"></tm-button>
							<tm-button :round="24" color="orange" :margin="[24,0]" label="详情" :font-size="24"
								:width="120" :height="64" @click="openOrderDetail(item['id'])"></tm-button>
							<tm-button v-if="item.status == 1&&code == '1'?flag:!flag" :round="24" color="orange"
															:margin="[24,0]" label="删除" :font-size="24" :width="120" :height="64"
															@click="delOrder(item['id'])"></tm-button>
						</tm-descriptions-item>
					</tm-descriptions>
				</tm-sheet>

			</template>

		</tm-card>

		<view class="mb-32 mx-32 round-3 overflow">
			<tm-cell :margin="[0, 0]" :titleFontSize="30" title=" ">
				<template v-slot:right><tm-text label=" "></tm-text></template>
			</tm-cell>
			<tm-cell :margin="[0, 0]" :titleFontSize="30" title=" ">
				<template v-slot:right><tm-text label=" "></tm-text></template>
			</tm-cell>
			<tm-cell :margin="[0, 0]" :titleFontSize="30" title=" ">
				<template v-slot:right><tm-text label=" "></tm-text></template>
			</tm-cell>
		</view>

		<tm-tabbar :autoSelect="false" v-model:active="acc">
			<tm-tabbar-item @click="acc=0" activeColor="orange" url='/pages/index/index' open-type='reLaunch' text="首页"
				icon='tmicon-md-home'></tm-tabbar-item>
			<tm-tabbar-item @click="acc=1" activeColor="orange" url='/pages/index/seach' text="预约"
				icon='tmicon-ios-bookmarks'></tm-tabbar-item>
			<!--
			<tm-tabbar-item @click="acc=2" :shadow="2" text="分享" url='/pages/index/share' btn-top fontColor="white"
				activeColor="white" linear="top" linearDeep="accent" color="yellow" icon="tmicon-plus"></tm-tabbar-item>-->
			<tm-tabbar-item @click="acc=2" activeColor="orange" url='/pages/index/order' text="订单"
				unicon="tmicon-ios-filing" icon="tmicon-ios-filing"></tm-tabbar-item>
			<tm-tabbar-item @click="acc=3" activeColor="orange" url='/pages/index/my' text="我" unicon="tmicon-account"
				icon="tmicon-userplus-fill"></tm-tabbar-item>
		</tm-tabbar>
		
		
		<tm-modal title="确认对话框" content="是否确认开始计时？" okColor="orange" okText="开始计时" @ok="orderStart()" v-model:show="showWin"></tm-modal>
	</tm-app>
</template>

<script lang="ts" setup>
	import { ref } from "vue"
	import { onLoad } from "@dcloudio/uni-app"
	import { isEmpty } from "@/tmui/tool/function/util";
	import { getOrderByWxid, quitOrder, startOrder, stopOrder, payDjOrder, payPayOrder, delDjOrder } from '@/api/order'


	const userid = ref('');
	const acc = ref(2);
	const keys = ref("1");
	const code = ref("3");
	const tabsTitle = ref([
		{ key: "1", title: "全部", icon: "" },
		{ key: "2", title: "待付定金", icon: "" },
		{ key: "3", title: "待上门", dot: false, icon: "" },
		{ key: "4", title: "服务中", dot: false, count: "", icon: "" },
		{ key: "5", title: "待付尾款", dot: false, count: "", icon: "" },
		{ key: "6", title: "完成", dot: false, count: "", icon: "" },
	])
	const orderlist = ref([])
	const flag = ref(true);
	const showWin = ref(false);


	onLoad(() => {
		userid.value = uni.getStorageSync("userid");
		if (isEmpty(userid.value)) {
			uni.navigateTo({
				url: '/pages/auth/auth'
			})
		} else {
			let pcode = uni.getStorageSync("code");
			if (!isEmpty(pcode)) {
				code.value = pcode;
			}
			queryOrder('1');
		}
	})
	

	
	function openOrderDetail(id : string) {
		uni.navigateTo({
			url: `/pages/order/orderDetail?scene=${id}`
		})
	}

	function qorder(id : string) {
		// console.log(id);
		qqorder(id);
	}

	const qqorder = async (id : string) => {
		let param = { "id": id };
		await quitOrder(param);
		queryOrder(keys.value);
	}


	function payOrder(id : string) {
		czfPayOrder(id);
	}
	const czfPayOrder = async (id : string) => {
		let param = { "id": id, "wxid": userid.value };
		const result = await payPayOrder(param);
		// console.log(JSON.stringify(result));
		uni.requestPayment({
			provider: 'wxpay',    // 支付类型-固定值
			timeStamp: result.timeStamp, // 时间戳（单位：秒）
			nonceStr: result.nonceStr, // 随机字符串
			package: result.packageValue, // 固定值
			signType: result.signType, // 固定值
			paySign: result.paySign, // 签名
			success: (res) => {
				console.log('success:', JSON.stringify(res));
				uni.navigateTo({
					url: '/pages/jz/payResult/payResult?flag=true'
				})
			},
			fail: (err) => {
				console.log('fail:', JSON.stringify(err));
				uni.navigateTo({
					url: '/pages/jz/payResult/payResult?flag=false'
				})
			}
		});
	}

	function cliOrderEval(id : string) {
		uni.navigateTo({
			url: `/pages/detail/orderEval?id=${id}`
		})
		return false;
	}
	
	const delOrder = async(id : string) => {
		let param = { "id": id, "wxid": userid.value };
		const result = await delDjOrder(param);
	}


	function zfDjOrder(id : string) {
		czfDjOrder(id);
	}

	const czfDjOrder = async (id : string) => {
		let param = { "id": id, "wxid": userid.value };
		const result = await payDjOrder(param);
		// console.log(JSON.stringify(result));
		uni.requestPayment({
			provider: 'wxpay',    // 支付类型-固定值
			timeStamp: result.timeStamp, // 时间戳（单位：秒）
			nonceStr: result.nonceStr, // 随机字符串
			package: result.packageValue, // 固定值
			signType: result.signType, // 固定值
			paySign: result.paySign, // 签名
			success: (res) => {
				console.log('success:', JSON.stringify(res));
				uni.navigateTo({
					url: '/pages/jz/payResult/payResult?flag=true'
				})
			},
			fail: (err) => {
				console.log('fail:', JSON.stringify(err));
				uni.navigateTo({
					url: '/pages/jz/payResult/payResult?flag=false'
				})
			}
		});
	}


	function tabschange(key : string | number) {
		keys.value = key;
		queryOrder(key);
	}

	const queryOrder = async (status : any) => {
		let param = { "wxid": userid.value, "status": status, "code": code.value };
		const result = await getOrderByWxid(param);
		orderlist.value = result
	}

	function qorderStart(key : string | number) {
		showWin.value = true;
		keys.value = key;
		// orderStart(key);
	}

	const orderStart = async() => {
		let param = { "id": keys.value, "wxid": userid.value }
		await startOrder(param);
		queryOrder(keys.value);
	}

	function qorderStop(key : string | number) {
		uni.showModal({
		  title: '提示',
		  content: '确定要停止计时吗？',
		  confirmText: '确认',
		  cancelText: '取消',
		  success: (res) => {
		    if (res.confirm) {
		      orderStop(key);
		    } else if (res.cancel) {
		      console.log('用户点击了取消按钮')
		    }
		  },
		  fail: (err) => {
		    console.log('showModal接口调用失败：', err)
		  }
		})
	}

	const orderStop = async (status : any) => {
		let param = { "id": status, "wxid": userid.value }
		await stopOrder(param);
		queryOrder(keys.value);
	}


	function statusText(status : string) {
		if (status === '1') {
			return "待支付";
		}
		if (status === '2') {
			return "待付定金";
		}
		if (status === '3') {
			return "待上门";
		}
		if (status === '4') {
			return "服务中";
		}
		if (status === '5') {
			return "待付尾款";
		}
		if (status === '6') {
			return "完成";
		}
		if (status === '7') {
			return "订单取消";
		}
		return "未知状态";
	}

	function backPage(e : any) {
		// console.log(JSON.stringify(e));
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
</script>